<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/jquery.3.2.1.min.js"></script>
    <script src="js/swiper.min.js"></script>
    <script src="js/echarts.js"></script>
    <script src="js/index_ech.js"></script>
    <script src="js/index.js"></script>
</head>
<body>

<div class="z-body">
    <!--echart-->
    <header>
        <div id="map"></div>
        <div class="hea-content">
            <p>阿萨德提交了新的订单</p>
            <p>杨*宇提交了新的订单</p>
        </div>

        <!--搜索开始-->
        <div class="section">
            <form action="#">
                <input placeholder="搜索食物、地区名称" type="text" name="" id="">
            </form>
        </div>

    </header>
    <!--内容-->
    <div class="content">
        <ul class="con-top">
            <li>
                <img src="images/laba.png" alt="">
            </li>
            <li>公告</li>
            <li>
                文章标题文章标题文章标题&nbsp;&nbsp;&nbsp;&gt;
            </li>
        </ul>
        <div class="con-center">
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
            <p>云南-玉溪</p>
            <span>热门</span>
        </div>
        <div class="con-bottom">
            <dl>
                <dt>文章标题文章标题文章标题</dt>
                <dd>2017-10-01</dd>
                <div>
                    <p class="lefts">
                        <span>1698</span>
                    </p>
                    <p class="rights">
                        <span>1000</span>
                        <span>1000</span>
                    </p>
                </div>
            </dl>
        </div>
        <div class="con-foo">
            <dl class="con-foo-dl">
                <dt>
                    <div>
                        <img src="images/content3.jpg" alt="">
                    </div>
                    <p>杰森</p>
                </dt>
                <dd>
                    联合国教科文组织今年发布的报告显示，全世界每年有将近2.46亿儿童和青少年因体貌特征、性别与性取向、种族与文化差异等遭受欺凌.
                </dd>
            </dl>
        </div>
    </div>
    <!--scroll-->
    <div class="scroll-box">
        <ul class="scroll-inset">
            <li>
                <div>
                    <strong>10</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
            <li>
                <div>
                    <strong>10</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
            <li>
                <div>
                    <strong>10</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
            <li>
                <div>
                    <strong>10</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
            <li>
                <div>
                    <strong>10</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
            <li>
                <div>
                    <strong>5</strong>
                    <b>优惠券</b>
                    <span>￥</span>
                </div>
                <p>无门槛使用</p>
                <a href="">立即领取</a>
            </li>
        </ul>
    </div>
    <!--list秒杀-->
    <h4 class="list-title">标题组件</h4>
    <div class="list">
        <ul class="list-box">
            <li class="list-box-top">
                <a href="">
                    <img src="images/content3.jpg" alt="">
                </a>
                <div class="list-position">
                    <div class="time">
                        距开始：<span>00</span>：<span>00</span>：<span>00</span>
                    </div>
                    <p>文本标签文本标签文本标签文本标签</p>
                    <div class="time-next">
                        <span>￥99.99</span>
                        <span>2人团</span>
                    </div>
                </div>
            </li>
            <li class="list-box-bot">
                <dl>
                    <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                    <dd>
                        <img src="images/xin.png" alt="">
                    </dd>
                </dl>
            </li>
        </ul>
        <ul class="list-box">
            <li class="list-box-top">
                <a href="">
                    <img src="images/content3.jpg" alt="">
                </a>
                <div class="list-position">
                    <div class="time">
                        距开始：<span>00</span>：<span>00</span>：<span>00</span>
                    </div>
                    <p>文本标签文本标签文本标签文本标签</p>
                    <div class="time-next">
                        <span>￥99.99</span>
                        <span>2人团</span>
                    </div>
                </div>
            </li>
            <li class="list-box-bot">
                <dl>
                    <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                    <dd>
                        <img src="images/xin.png" alt="">
                    </dd>
                </dl>
            </li>
        </ul>
        <ul class="list-box">
            <li class="list-box-top">
                <a href="">
                    <img src="images/content3.jpg" alt="">
                </a>
                <div class="list-position">
                    <div class="time">
                        距开始：<span>00</span>：<span>00</span>：<span>00</span>
                    </div>
                    <p>文本标签文本标签文本标签文本标签</p>
                    <div class="time-next">
                        <span>￥99.99</span>
                        <span>2人团</span>
                    </div>
                </div>
            </li>
            <li class="list-box-bot">
                <dl>
                    <dt>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签</dt>
                    <dd>
                        <img src="images/xin.png" alt="">
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
    <!--商品-->
    <ul class="goods-box">
        <li class="goods">
            <div class="g-top">
                <a href="">
                    <img src="images/content3.jpg" alt="">
                </a>
                <dl>
                    <dt>单列商品单列商品单列商品单列商品单列商品</dt>
                    <dd>
                        <span>包邮</span>
                        <span>包退</span>
                    </dd>
                    <p>
                        <span>云南</span>
                        <span>玉溪</span>
                    </p>
                    <div>￥99.99</div>
                </dl>
            </div>
            <div class="g-bottom">
                <p>文本标签文本标签文本标签文本标签文本标签文本标签文本标签文本标签文</p>
                <img src="images/xin.png" alt="">
            </div>
        </li>
    </ul>

    <!--图片列表-->
    <div class="foo-image">
        <div class="image1">
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
        </div>
        <div class="image2">
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
        </div>
        <div class="image2">
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
            <a href="">
                <img src="images/content3.jpg" alt="">
            </a>
        </div>
    </div>

    <!--轮播-->
    <div class="banner">
        <div class="swiper-container banner-swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/content3.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/content3.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/content3.jpg" alt="">
                    </a>
                </div>
                <div class="swiper-slide">
                    <a href="">
                        <img src="images/content3.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!--nav-->
    <div class="nav-box">
        <p>还没扯够吗？</p>
        <ul class="nav">
            <li class="nav-active">
                <div><img src="images/lvfoo1.png" alt=""></div>
                <p>精选</p>
            </li>
            <li>
                <div><img src="images/baifoo2.png" alt=""></div>
                <p>精选</p>
            </li>
            <li>
                <div><img src="images/baifoo3.png" alt=""></div>
                <p>精选</p>
            </li>
        </ul>
        <div class="nav-fixed">
            <img src="images/shounahe.png" alt="">
        </div>
    </div>






    <!--z-body END-->
</div>







</body>
</html>